<template>
  <div>
    <a-row type="flex" :gutter="16">
      <a-col :span="8" v-if="designMode === 'design'">
        <a-card title="设计" class="card-holder" :bodyStyle="{padding: 0}">
          <template slot="extra">
            <a-button size="small" icon="reload" title="刷新预览表单" class="mr-1" @click="reload"></a-button>
            <a-button size="small" icon="code" title="切换至参数模式" @click="switchMode('code')"></a-button>
          </template>
        </a-card>
      </a-col>
      <a-col :span="8" v-else-if="designMode === 'code'">
        <a-card title="参数" class="card-holder" :bodyStyle="{padding: 0}">
          <template slot="extra">
            <a-button size="small" icon="reload" title="刷新预览表单" class="mr-1" @click="reload"></a-button>
            <a-button size="small" icon="layout" title="切换至设计模式" @click="switchMode('design')"></a-button>
          </template>
          <vue-json-editor v-model="formData" mode="code" @jsonChange="handleJsonChange" @hasError="onJsonError"></vue-json-editor>
        </a-card>
      </a-col>
      <a-col :span="16">
        <a-card title="预览" class="card-holder">
          <div class="content-holder">
            <i-form :formData="formData" v-if="reloading === false"></i-form>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import IForm from '../../components/IForm'
import VueJsonEditor from '../../components/VueJsonEditor'
export default {
  name: 'FormLayout',
  components: {
    IForm, VueJsonEditor
  },
  data() {
    return {
      designMode: 'design',
      reloading: false,
      formData: {
        title: '用户信息',
        labelCol: {span: 4},
        wrapperCol: {span: 18},
        items: [
          {
            fieldId: 'name', fieldName: '姓名', fieldType: 'text', help: '请填写真实姓名', required: true, 
            objectField: {maxLength: 10, minLength: 2, placeholder: '请填写姓名', defaultValue: '张三'}
          },
          {
            fieldId: 'gender', fieldName: '性别', fieldType: 'radio', help: '如果不想公布自己的性别，可以选择保密', required: false,
            objectField: {
              options: [
                {label: '男', value: 'male', sortCode: '1', defaultValue: false},
                {label: '女', value: 'female', sortCode: '2', defautlValue: false},
                {label: '保密', value: 'secret', sortCode: '3', defaultValue: true}
              ]
            }
          },
          {
            fieldId: 'age', fieldName: '年龄', fieldType: 'integer', help: '请填写实际年龄', required: false,
            objectField: {maxValue: 130, minValue: 1, defaultValue: 24}
          },
          {
            fieldId: 'interests', fieldName: '兴趣爱好', fieldType: 'checkbox', help: '', required: false,
            objectField: {
              options: [
                {label: '唱歌', value: 'sing', sortCode: '1', defaultValue: true},
                {label: '运动', value: 'sports', sortCode: '2', defaultValue: true},
                {label: '户外', value: 'outdoor', sortCode: '3', defaultValue: false},
                {label: '看电影', value: 'movie', sortCode: '4', defaultValue: true},
                {label: '追剧', value: 'drama', sortCode: '5', defaultValue: false}
              ]
            }
          },
          {
            fieldId: 'self_description', fieldName: '自我描述', fieldType: 'textarea', help: '简要介绍一下自己', required: false,
            objectField: {maxLength: 255, minLength: 0, placeholder: '请填写自我描述信息', defaultValue: undefined}
          },
          {
            fieldId: 'lucky_number', fieldName: '幸运数字', fieldType: 'number', help: '', required: false,
            objectField: {maxLength: 5, scale: 2, defaultValue: undefined}
          },
          {
            fieldId: 'personal_assets', fieldName: '个人总资产', fieldType: 'currency', help: '', required: false,
            objectField: {maxLength: 10, scale: 2, defaultValue: undefined}
          },
          {
            fieldId: 'birthday', fieldName: '出生日期', fieldType: 'date', help: '', required: false,
            objectField: {withTime: false, defaultDate: '2019-09-09'}
          },
          {
            fieldId: 'notify_time', fieldName: '提醒时间', fieldType: 'date', help: '', required: false,
            objectField: {withTime: true, defaultDateTime: '2019-09-09 17:48:32'}
          },
          {
            fieldId: 'mobile', fieldName: '手机号码', fieldType: 'telephone', help: '请填写个人手机号码', required: true,
            objectField: {showMask: true, maxLength: 11, defaultValue: undefined} 
          },
          {
            fieldId: 'email', fieldName: '邮箱', fieldType: 'email', help: '请填写个人邮箱', required: true,
            objectField: {showMask: false, maxLength: 60, defaultValue: undefined}
          },
          {
            fieldId: 'profile', fieldName: '个人主页', fieldType: 'url', help: '', required: false,
            objectField: {maxLength: 255, defaultValue: undefined}
          },
          {
            fieldId: 'bio', fieldName: '个人简历', fieldType: 'file', help: '请上传word或者pdf格式的文件', required: false, 
            objectField: {maxNumber: 1, minNumber: 1}
          },
          {
            fieldId: 'photos', fieldName: '生活照', fieldType: 'picture', help: '请上传jpg、png或者gif格式的个人照片', required: false,
            objectField: {maxNumber: 3, minNumber: 2, isAllowLocal: true}
          },
          {
            fieldId: 'progress', fieldName: '达成进度', fieldType: 'percent', help: '', required: false,
            objectField: {maxLength: 6, scale: 2, defaultValue: 99}
          },
          {
            fieldId: 'married', fieldName: '是否已婚', fieldType: 'boolean', help: '请根据实际情况填写', required: true,
            objectField: {defaultValue: false}
          }
        ],
      }
    };
  },
  methods: {
    reload() {
      this.reloading = true;
      this.$nextTick(() => {
        this.reloading = false;
      });
    },
    switchMode(mode) {
      this.designMode = mode;
    },
    handleJsonChange(json) {
      
    },
    onJsonError(json) {

    }
  }
}
</script>

<style scoped>
::-webkit-scrollbar {
  width: 8px;
  background-color: #f5f5f5;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #bfbfbf;
}

.card-holder {
  height: calc(100vh - 160px);
}

.content-holder {
  height: calc(100vh - 264px);
  overflow-x: hidden;
  overflow-y: auto;
}
</style>